<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!-- 使用不同智能机的宽度 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="renderer" content="webkit">
    <title>校花点点</title>
    <link rel="stylesheet" media="all" href="css/base.css">
    <link rel="stylesheet" href="css/dian.css"/>
    <script src="js/jquery-1.12.3.min.js"></script>
    <style>

    </style>
    <script>
        ;(function(win, doc){
            function change(){
                doc.documentElement.style.fontSize=20*doc.documentElement.clientWidth/320+'px';
            }

            if(doc.documentElement.clientWidth>640){
                doc.documentElement.style.fontSize=20*640/320+'px';
            }else{
                change();
            }
            win.addEventListener('resize', change, false);
        })(window, document);

        function GetQueryString(name)
        {
            var search = document.location.search;
            var pattern = new RegExp("[?&]"+name+"\=([^&]+)", "g");
            var matcher = pattern.exec(search);
            var items = null;
            if(null != matcher){
                try{
                    items = decodeURIComponent(decodeURIComponent(matcher[1]));
                }catch(e){
                    try{
                        items = decodeURIComponent(matcher[1]);
                    }catch(e){
                        items = matcher[1];
                    }
                }
            }
            return items;
        }

        function addLike(id){
            $.ajax({
                url: 'http://app.missquq.com/attach/clicks',
                data:{
                    id:id
                },
                jsonp: 'callback',    // cbName
                dataType: 'jsonp', // 使用jsonp
                success: function(json) {
//                    console.log(json);
                }
            });
        }

        $(function(){
            $('.bg-img').css('height',$(document).height());
            $.ajax({
                url: 'http://app.missquq.com/attach/userDetail',
                data:{
                    userId:GetQueryString('personalId'),
                    imageId:GetQueryString('imageId')
                },
                jsonp: 'callback',    // cbName
                dataType: 'jsonp', // 使用jsonp
                success: function(json) {
                    console.log(json);
                    $('.front').attr({'src':'http://app.missquq.com'+json.thumbnail,'index':json.imageId});
                    $('.titleText i').text(json.order);
                    $('.titleText span').text(json.username);
                    $('.dian-text span').text(json.schoolName);
                    $('.dian-text i').text(json.username);
                    $('.dian-text b').text(json.praises);
                }
            });

            $('.perround1R').one('click',function(){
                $('.addOne').css({'animation':'addone 1s linear','webkitAnimation':'addone 1s linear'});
                addLike($('.front').attr('index'));
            });



            $('.perInform').on('click',function(){
                if(sessionStorage.userId=='null'){
                    alert('请先登录或下载APP');
                    window.location.href="diandiandian.html";
                }else{
                    var re=confirm('确定举报此图片吗？');
                    if(re){
                        $.ajax({
                            url: 'http://app.missquq.com/report/save',
                            data:{
                                userId:sessionStorage.userId,
                                id:$('.front').attr('index')
                            },
                            jsonp: 'callback',    // cbName
                            dataType: 'jsonp', // 使用jsonp
                            success: function(json) {
                                alert('举报成功')
                            }
                        });
                    }
                }



            })

        });
    </script>
</head>
<body>
<div class="container w640" id="main">
    <div class="bg">
        <img src="img/personbg.jpg"  alt="" class="bg-img"/>
        <img src="img/dian/diandian3.png" alt="" class="dianTitleImg"/>
        <div class="titleText">
            <img src="img/dian/title.png" alt=""/>
            <p><span>任佳怡</span>颜值击败全国<i>30%</i>的校花</p>
        </div>
            <ul class="perImg">
                <li class="current">
                    <div class="dian-space">
                        <img src="img/dian/ditu.png" alt=""/>
                        <div class="dian-mainImg" >
                            <img src="" class="front" index=""/>
                        </div>
                    </div>
                    <p class="dian-text"><span></span><i></i><em class="Popularity">人气值</em><b class="PopularityNum"></b></p>
                </li>
            </ul>
            <img src="img/addone.png" class="addOne" alt=""/>
    </div>
    <div class="perround1R next">
        <img src="img/dian/like.png" alt=""/>
        <img src="img/like1.png" alt="" class="dislike dislike-h"/>
    </div>
    <div class="perround2T">
        <a href="paihangbang.html"><img src="img/whiteround2.png" alt=""/></a>
    </div>
    <a class="perInform" href="javascript:;"><p>举报虚假照片</p></a>
    <div class="perround2B">
        <a href="diandiandian.html"><img src="img/janeround3.png" alt=""/></a>
    </div>
</div>
</body>
</html>